<!--
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        table{
            border: 0.0625rem;
        }
        .box{
            width: 25.75rem;
            height: 23.75rem;

        }

        .zhuanjia{
            margin-top: 0.25rem;
            width: 55%;
            height: 100%;
            float:left;
        }
        .zhuanjia1{
            margin-top: 0.25rem;
            width:100%;
            height: 100%;
            float:left;
        }
        .btn-primary{
            margin-top: 5.625rem;
            margin-left: 1.25rem;

        }
        .list li span{
            font-weight:bold;}

        .list li{
            line-height:24px;
            font-size:14px;
            list-style:none;
        }
        .addImages {
            display:inline-block;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box ;
            position: relative;
            width:18.25rem;
            height:25.5rem;
            overflow:hidden;
        }
        .file {
            position:absolute;
            top:0;
            left:0;
            width:18.25rem;
            height:26.5rem;
            opacity:0;
        }


        ul,p{margin:0;padding:0;}
    </style>
</head>
<body>


<div>
    <<div >
    <h2 align="center">添加医生信息</h2>
</div>
    <hr />
    <form action="/1/upload" method="POST" class="zhuanjia1" enctype="multipart/form-data" id="form-data" hidden>
        <input type="file" name="file" class="file" id="file" accept="image/png, image/jpeg, image/gif, image/jpg">
    </form>
    <table class="table table-bordered">
        <tbody>
        &lt;!&ndash; 1 &ndash;&gt;
        <tr th:each="threedoctor,itemStat: ${doctors}" class="box">
            <td th:each="doctor: ${doctors[itemStat.index]}" class="box">
                <div class="weui-cells weui-cells_form">
                    <div class="addImages" style="float:left;">
                        <img th:src="@{'/img/'+ ${doctor.id}}" th:attr="data-id=${doctor.id}" class="doctor-avatar zhuanjia1"/>
                    </div>
                </div>
                <ul class="list">
                    &lt;!&ndash;     <p>&nbsp;</p>
                         <p>&nbsp;</p>
                         <p>&nbsp;</p>
                         <li><span>编号:</span><span th:text="${doctor.id}">#</span></li>
                         <li><span>姓名:</span><span th:text="${doctor.name}">#</span></li>
                         <li><span>性别:</span><span th:text="${doctor.sex}">#</span></li>
                         <li><span>专业方向：</span><span th:text="${doctor.direction}">斜视与小儿眼病</span></li> &ndash;&gt;
                    <a  class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</a>
                </ul>
            </td>
        </tr>

        </tbody>
    </table>
    &lt;!&ndash; 模态框（Modal） &ndash;&gt;
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>

                    <form class="bs-example bs-example-form" action="/add" role="form">
                        <p><center><h2>在线添加</h2></center></p>
                        <hr />
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon">I&nbsp&nbsp&nbsp&nbsp&nbsp&nbspD</span>
                            <input name="id" type="text" class="form-control" placeholder="请输入所添加的ID">
                        </div><br>
                        &lt;!&ndash; 1 &ndash;&gt;
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon">姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名</span>
                            <input name="name" type="text" class="form-control" placeholder="请输入添加的信息">
                        </div><br>
                        &lt;!&ndash; 2 &ndash;&gt;
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon">性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别</span>
                            <input name="sex" type="text" class="form-control" placeholder="请输入添加的信息">
                        </div><br>
                        &lt;!&ndash; 3 &ndash;&gt;
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon">专业方向</span>
                            <input name="direction" type="text" class="form-control" placeholder="请输入添加的信息">
                        </div><br>
                        &lt;!&ndash; 4 &ndash;&gt;
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon">个人简介</span>
                            <input name="frofile" type="text" class="form-control" row="2" placeholder="请输入添加的信息">
                        </div><br>
                        &lt;!&ndash; 5 &ndash;&gt;
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon">专业特长</span>
                            <input name="speciality" type="text" class="form-control" placeholder="请输入添加的信息">
                        </div><br>
                        <button type="submit" class="btn btn-default">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    document.getElementById('file').onchange = function() {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function() {
            document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
        };
        fr.readAsDataURL(imgFile);
        document.getElementById('form-data').submit();
    };
    var doctorAvatarList = document.getElementsByClassName('doctor-avatar');
    for(var i in doctorAvatarList)
    {
        doctorAvatarList[i].addEventListener('click', function () {
            var doctorId = this.getAttribute("data-id");
            document.getElementById("form-data").setAttribute("action","/" + doctorId + "/upload");
            document.getElementById("file").click();
        }, false);
    }

</script>

</html>
-->
